<script setup lang="ts">

    import { defineProps, toRefs, ref, reactive, getCurrentInstance, inject } from 'vue';
    import type { FormInstance } from 'element-plus';

    // RSA加密解密组件
    import { JSEncrypt } from 'jsencrypt';
    import { api } from '@/services/api';

    const msg: any = inject('message');
    const internalInstance = getCurrentInstance();
    const setPwdFormRef = ref<FormInstance>();

    // 属性
    let props = defineProps({
        visible: {
            type: Boolean,
            default: false
        }
    });
    let { visible } = toRefs(props);

    const title = ref("修改密码");

    /**
     * 校验密码
     * @param rule 
     * @param value 
     * @param callback 
     */
    const validatePassWord = (rule: any, value: any, callback: any) => {
        if(setPwdForm.newPwd !== value) {
            callback(new Error('两次密码输入不一致'));
        }
        callback();
    }

    // 设置密码表单信息
    const setPwdForm = reactive({
        // 旧密码
        oldPwd: "",
        // 新密码
        newPwd: "",
        // 确认新密码
        againNewPwd: "",
        rules: {
            oldPwd: [
                { required: true, message: '原密码不能为空', trigger: 'blur' }
            ],
            newPwd: [
                { required: true, message: '新密码不能为空', trigger: 'blur' }
            ],
            againNewPwd: [
                { validator: validatePassWord, trigger: 'blur' }
            ]
        }
    });

    const updatePwd = async (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        await formEl.validate(async (valid, fields) => {
            if (valid) {
                // 密码加密
                // 获取RSA算法公钥
                const response = await api.common.getPublicKey();
                 // 新建JSEncrypt对象
                let encryptor = new JSEncrypt();
                // 设置公钥
                encryptor.setPublicKey(response.data.value);
                // 设置key
                let key: string = response.data.key;
                // 修改密码
                api.user.updatePwd({
                    oldPwd: encryptor.encrypt(setPwdForm.oldPwd),
                    newPwd: encryptor.encrypt(setPwdForm.newPwd),
                    key
                }).then(response => {
                    if(response.code === 0) {
                        if(internalInstance) {
                            internalInstance.emit("close");
                        }
                        msg.success("修改成功");
                        formEl.resetFields();
                    } else {
                        msg.error(response.msg);
                    }
                });
                
            }
        })
    }

</script>
<template>
   <el-dialog v-model="visible" :title="title" width="320" draggable :lock-scroll="false" :close-on-click-modal="false">
        <el-form :model="setPwdForm" :rules="setPwdForm.rules" ref="setPwdFormRef" class="from-box">
            <el-form-item prop="oldPwd">
                <el-input type="password" size="large" placeholder="请输入原密码" v-model="setPwdForm.oldPwd"></el-input>
            </el-form-item>
            <el-form-item prop="newPwd">
                <el-input type="password" size="large" placeholder="请输入新密码" v-model="setPwdForm.newPwd"></el-input>
            </el-form-item>
            <el-form-item prop="againNewPwd">
                <el-input type="password" size="large" placeholder="请再次输入新密码" v-model="setPwdForm.againNewPwd"></el-input>
            </el-form-item>
        </el-form>
        <el-button style="width: 100%;" type="primary" @click="updatePwd(setPwdFormRef)">提         交</el-button>
   </el-dialog>
</template>
<style lang="css" scoped>
    .old_email {
        padding: 0 0 5px 0;
        font-weight: bold;
        color: #999;
    }

    .code-text {
        color: #0084ff;
    }
</style>